<script >
import { User, DocumentAdd } from '@element-plus/icons-vue'  

export default {
    data() {
        return {
            dataSelect: '',
            defaultProps: {
                children: 'children',
                label: 'label',
                name:'',
                 },

            // item:'' ,


            data :[
    {
        label: '实验小学',
        children: [
            {
                label: '一年级',
                children: [
                    { label: '一年级一班', },
                    { label: '一年级二班', },
                    { label: '一年级三班', },
                    { label: '一年级四班', },
                ],
            },
            {
                label: '二年级',
                children: [
                    { label: '二年级一班', },
                    { label: '二年级二班', },
                    { label: '二年级三班', },
                    { label: '二年级四班', },
                ],
            }, {
                label: '三年级',
                children: [
                    { label: '三年级一班', },
                    { label: '三年级二班', },
                    { label: '三年级三班', },
                    { label: '三年级四班', },
                ],
            },
            //   {
            //     label: '四年级',
            //     children: [
            //       {label: '四年级一班',}, 
            //       {label: '四年级二班',}, 
            //       {label: '四年级三班',}, 
            //       {label: '四年级四班',}, 
            //     ],
            //   }, {
            //     label: '五年级',
            //     children: [
            //       {label: '五年级一班',}, 
            //       {label: '五年级二班',}, 
            //       {label: '五年级三班',}, 
            //       {label: '五年级四班',}, 
            //     ],
            //   }, {
            //     label: '六年级',
            //     children: [
            //       {label: '六年级一班',}, 
            //       {label: '六年级二班',}, 
            //       {label: '六年级三班',}, 
            //       {label: '六年级四班',}, 
            //     ],
            //   },

        ],
    },

]

        }
    },
    components: {
        User,
        DocumentAdd
    },
    methods:{
        add(){
            // this.$refs.tree.data[0].children[0].children[0].label.$router.push('/yxd/sz') 
            console.log(this.$refs.tree.data);
            this.$router.push('/yxd/sh/GradeIndex/ff')
        },
        photo(){
            this.$router.push('/yxd/sh/GradeIndex/myPhotoalbum')
        },
        Pubphoto(){
            this.$router.push('/yxd/sh/GradeIndex/PublishAlbum')

        }
    }
}
</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-aside>
                <el-tree ref="tree" :data="data"  :props="defaultProps"  @node-click="add"/>
            </el-aside>
            <el-container>
                <el-header>
                    <el-radio-group label="size control">
                    </el-radio-group>
                    <div class="demo-date-picker">
                        <div class="block">
                            <el-row :gutter="10">
                                <el-col :span="2" :offset="1">
                                    <span class="demonstration">发布日期 :</span>
                                </el-col>
                                <el-col :span="7">
                                    <el-date-picker v-model="dataSelect" type="daterange" range-separator="~"
                                        start-placeholder="Start date" end-placeholder="End date" />
                                </el-col>
                                <el-col :span="4" :offset="1">
                                    <el-input style="width:140px;" placeholder="请输入发布者姓名" v-model=" defaultProps.name" />
                                </el-col>
                                <el-col :span="2" :offset="1">
                                    <el-button type="primary">查询
                                    </el-button>
                                </el-col>
                                <el-col :span="6" :push="4">
                                    <el-button type="primary" @click="photo">
                                        <el-icon>
                                            <User />
                                        </el-icon>
                                        我的相册
                                    </el-button>
                                    <el-button type="primary" @click="Pubphoto">

                                        <el-icon>
                                            <DocumentAdd />
                                        </el-icon >
                                        发布相册
                                    </el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-header>
                <el-main><router-view></router-view></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped lang="scss">
.el-aside {
    background-color: white;
    width: 150px;
    padding-top: 30px;
    height: 800px;
    padding-left: 10px;
    margin-right: 10px;
}

.el-main {
    background-color: white;
}

.el-header {
    background-color: white;
    height: 100px
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
    width: 200px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}



.demo-date-picker .block {
    /* padding: 30px 0;
    text-align: center; */
    border-right: solid 1px black;
    flex: 1;
    display: flex;

    .el-input {
        margin-left: 10px;
        width: 200px;
        margin-left: 70px;


    }


}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: black;
    font-size: 16px;
    margin-bottom: 20px;

    padding-top: 8px;


}.el-tree{
    background-color: rgb(217, 232, 207);
    color: black;
}
</style>